<template>
    <div>
        <van-nav-bar
            title="我的奖励金"
            left-arrow
            @click-left="onClickLeft"
            />
            <van-tabs v-model="activeName">
                <van-tab title="优惠券" name="a">
                     <van-coupon-cell
                    :coupons="coupons"
                    :chosen-coupon="chosenCoupon"
                    @click="showList = true"
                    />
                    <van-popup v-model="showList" position="bottom">
                        <van-coupon-list
                            :coupons="coupons"
                            :chosen-coupon="chosenCoupon"
                            :disabled-coupons="disabledCoupons"
                            @change="onChange"
                            @exchange="onExchange"
                        />
                    </van-popup>
                </van-tab>
                <van-tab title="红包" name="b">
                    <van-coupon-cell
                        :coupons="coupons"
                        :chosen-coupon="chosenCoupon"
                        show-exchange-bar="false"
                        title="红包"	
                        @click="showList = true"
                        />
                    <van-popup v-model="showList" position="bottom">
                        <van-coupon-list
                            :coupons="coupons"
                            :chosen-coupon="chosenCoupon"
                            :disabled-coupons="disabledCoupons"
                            @change="onChange"
                            @exchange="onExchange"
                        />
                        </van-popup>
                </van-tab>
            </van-tabs>
    </div>
</template>

<script>
    const coupon = {
        available: 1,
        condition: '无使用门槛\n最多优惠12元',
        reason: '',
        value: 150,
        name: '满1350减50',
        startAt: 1489104000,
        endAt: 1514592000,
        valueDesc: '1.5',
        unitDesc: '元'
        };


    export default {
        name:'coupon',
        data() {
            return {
            activeName: 'a',
            chosenCoupon: -1,
            coupons: [coupon],
            disabledCoupons: [coupon],
            showList:""
            };
        },
        methods: {
            onClickLeft() {
            this.$router.push({path:'/my'})
                },
            onChange(index) {
                this.showList = false;
                this.chosenCoupon = index;
                },
            onExchange(code) {
                this.coupons.push(coupon);
                },
        },
        
    }
</script>

<style scoped>

</style>